<template>
<div>
    <el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->

          <el-menu-item index="1-1" @click="toupdate">更新</el-menu-item>
          <el-menu-item index="1-2" @click="toadd">增加</el-menu-item>
           <el-menu-item index="1-3" @click="tofalse">错误页面</el-menu-item>
           <el-menu-item index="1-3" @click="toHome">主页面</el-menu-item>

        </el-menu-item-group>
        <!-- <el-menu-item-group title="分组2"> -->
         
        <!-- </el-menu-item-group> -->
        <!-- <el-submenu index="1-4">
          <template slot="title">选项4</template>
          
        </el-submenu> -->
      </el-submenu>
      
    </el-menu>
  </el-aside>
  
  <el-container>
     <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
          
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小虎</span>
    </el-header>
   
    <el-main>
     
      <table>
          <tr>
              <th>编号</th>
               <th>用户名</th>
                <th>年龄</th>
                <th>邮箱</th>
                <th>操作</th>
                 
                 

          </tr>
          <tr v-for="(user,index) in tableData" v-bind:key="index">
              <td>{{user.id}}</td>
               <!-- <td>{{user.name}}</td> -->
                <router-link :to="`/updateUser/${user.id},${user.name},${user.age}`"><td>{{user.name}}</td></router-link>
                <td>
                  {{user.age}}
                </td>
                 <td>{{user.email}}</td>
                 <td>
                     <ul id="ul">
                         <li @click="del(user.id)">删除</li>
                        <router-link :to="`/updateUser/${user.id},${user.name},${user.age}`"><li>修改</li></router-link>
                         <!-- <li @click="toupdate(user.id,user.name)">修改</li> -->

                     </ul>
                 </td>
                 
                  
          </tr>
      </table> 

        <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
      
    </el-main>
  </el-container>
</el-container>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js,第三方插件js,json文件，图片文件等等）
//例如： import <<组件名称>> from '<<组件路径>>' ;

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    //  const item = {
    //      ms:null,
    //      id: null,
    //         prop: null,
    //         name: '王小虎',
    //         email: '上海市普陀区金沙江路 1518 弄'
    //       };
    return {
      tableData: null
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    toupdate(id, name) {
     
      console.log(id, name);
    
    },
    del(id) {
      alert("删除此用户");
      console.log("用户ID" + id);
      //发送ajax请求
      this.axios
        .delete("http://localhost:9000/user/delete?id=" + id)
        .then(res => {
          console.log(res);
        })
        .catch(response => {
          // 跳转到错误页面
          this.$router.push("/fal");
        });

      //代替router-link实现路由跳转
      this.$router.go(0);
    },
    toadd() {
      // 跳转到增加页面
      this.$router.push("/addUser");
    },
    tofalse() {
      this.$router.push("/fal");
    },
    
    toHome(){
       this.$router.push("/Home");
    }
  },
  //生命周期 -创建完成 （可以访问当前this 实例）
  created() {},
  //生命周期-挂载完成（可以访问DOM 元素）
  mounted() {
    // 发送ajax请求获取用户列表
    this.axios.get("http://localhost:9000/user/list").then(response => {
      // console.log(response.data.data);
      this.tableData = response.data.data;
      // console.log(this.tableData)
    });
  },
  beforeCreate() {}, //生命周期 -创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 -更新之后
  beforeDestroy() {}, //声明周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive 缓存功能 这个函数会触发
};
</script>
<style scoped>
/*@import url();引入公共css类*/
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
#ul li {
  list-style: none;
  float: left;
  margin-left: 20px;
}
</style>